<template>
    <div>
        <!--  opened Dialog 打开动画结束时的回调 -->
        <el-dialog @opened="opened" :title="info.title" :visible.sync="info.isShow" :before-close="close">
            <el-form :model="form" :rules="rules" ref="form1">

                <el-form-item label="所属角色" :label-width="formLabelWidth" prop="roleid">
                    <el-select v-model="form.roleid" placeholder="请选择所属角色">
                        <el-option v-for="item in role" :key="item.id" :label="item.rolename" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>

                <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
                    <el-input v-model="form.username" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" :label-width="formLabelWidth">
                    <el-input v-model="form.password" autocomplete="off" show-password></el-input>
                    <p v-if="!info.isAdd">留空则不修改</p>
                </el-form-item>


                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-switch v-model="form.status" active-color="#13ce66" inactive-color="#ccc" :active-value="1"
                        :inactive-value="2">
                    </el-switch>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button v-if="info.isAdd" type="primary" @click="confirm">确 定</el-button>
                <el-button v-else type="primary" @click="amend">修 改</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { userAdd, userInfo, userEdit } from '@/request/api'
import { successAlert } from '@/utils/alert'
export default {
    data() {
        return {
            formLabelWidth: '120px',
            form: {
                roleid: '',  //角色编号
                username: '',  //管理员名称
                password: '',  //密码
                status: 1   //状态  1正常2禁用
            },
            rules: {
                roleid: [
                    { required: true, message: '请选择所属角色', trigger: 'change' }
                ],
                username: [
                    { required: true, message: '请输入用户名', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ]
            }

        }
    },
    props: ['info'],
    methods: {
        ...mapActions({
            requestRole: 'role/listActions', //发起角色管理请求
            //发起管理员列表请求
            requestMember: 'member/listActions',
            // 发起管理员总数请求
            requestCount: 'member/countActions',
        }),
        //修改
        amend() {
            userEdit(this.form).then(res => {
                // console.log(res);
                if (res.code === 200) {
                    //消息提示
                    successAlert(res.msg)
                    //取消弹窗
                    this.cancel()
                    //更新列表
                    this.requestMember()
                }
            })
        },

        //数据回显
        getDetail(uid) {
            // console.log(uid);
            userInfo({ uid }).then(res => {
                console.log(res);
                if (res.code === 200) {
                    this.form = res.list
                    //密码则为空不修改
                    this.form.password = ''
                    this.form.uid = uid
                }
            })
        },
        //取消
        cancel() {
            this.info.isShow = false
            this.form = {
                roleid: '',  //角色编号
                username: '',  //管理员名称
                password: '',  //密码
                status: 1   //状态  1正常2禁用
            }
            //取消表单
            this.$refs.form1.resetFields()
        },
        close() {
            this.cancel()
        },

        //确定
        confirm() {
            this.$refs.form1.validate((val) => {
                // console.log(val);
                if (!val) {
                    return
                }
                // console.log(this.form);
                userAdd(this.form).then(res => {
                    // console.log(res);
                    if (res.code === 200) {
                        //消息提示
                        successAlert(res.msg)
                        //取消弹窗
                        this.cancel()
                        //更新列表
                        this.requestMember()
                        this.requestCount()
                    }
                })

            })
        },

        // 打开dialog动画结束时的回调
        opened() {
            //发起角色管理请求
            this.requestRole()
        }
    },
    mounted() { },
    watch: {},
    computed: {
        ...mapGetters({
            role: 'role/list'
        })
    },
    filters: {},
    components: {}
}
</script>
<style scoped></style>